Skip to content

feat(Icons): updated cog icons to rh settings#12345

Merged
kmcfaul merged 2 commits intopatternfly:mainfrom
thatblindgeye:replaceCogWwithRHSettings
Apr 10, 2026
Merged

feat(Icons): updated cog icons to rh settings#12345
kmcfaul merged 2 commits intopatternfly:mainfrom
thatblindgeye:replaceCogWwithRHSettings

Conversation

@thatblindgeye
Copy link
Copy Markdown
Contributor

@thatblindgeye thatblindgeye commented Apr 10, 2026 •
edited by coderabbitai bot
Loading

What: Closes #12344

Additional issues:

Summary by CodeRabbit

  • Style
    • Replaced the Settings cog icon with a new Settings icon across documentation, demos, examples, components, and tests for a consistent visible icon update throughout the libraries.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 10, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ff0b98b8-e045-4ac6-97c8-fb976c62ed15

📥 Commits

Reviewing files that changed from the base of the PR and between 2166f8e and ead6532.

📒 Files selected for processing (1)
  • packages/react-core/src/components/Button/Button.tsx
✅ Files skipped from review due to trivial changes (1)
  • packages/react-core/src/components/Button/Button.tsx

Walkthrough

Systematic replacement of CogIcon with RhUiSettingsFillIcon across multiple packages, including component implementations, demos, examples, documentation, and tests. No exported APIs, component props, or control flow were modified.

Changes

Cohort / File(s) Summary
Core Components & Tests
packages/react-core/src/components/MenuToggle/MenuToggle.tsx, packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx, packages/react-core/src/components/Button/Button.tsx		 Replaced CogIcon with RhUiSettingsFillIcon in rendering logic and updated test snapshot import/usage.
Icon Component Examples
packages/react-core/src/components/Icon/examples/Icon.md, packages/react-core/src/components/Icon/examples/IconBasic.tsx		 Updated example imports and JSX to use RhUiSettingsFillIcon instead of CogIcon; added minor blank-line edits inside code fences.
CodeEditor & Config UI
packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md, packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorConfigurationModal.tsx		 Swapped CogIcon for RhUiSettingsFillIcon in docs and default icon props for configuration modal items.
Demos & Documentation (core & table packages)
packages/react-core/src/demos/*, packages/react-core/src/demos/examples/..., packages/react-core/src/demos/NotificationDrawer/..., packages/react-table/src/demos/*, packages/react-core/src/demos/*.md, packages/react-table/src/demos/Table.md		 Replaced CogIcon imports/usage with RhUiSettingsFillIcon across demo examples and markdown docs; some fenced code blocks received minor blank-line formatting changes.
Page / Nav / Masthead Examples
packages/react-core/src/demos/examples/Page/*, packages/react-core/src/demos/examples/Nav/*, packages/react-core/src/demos/examples/Masthead/*		 Updated various kebab/dropdown "Settings" items to render RhUiSettingsFillIcon instead of CogIcon.
RTL & Toolbar Examples
packages/react-core/src/demos/RTL/*, packages/react-core/src/demos/Toolbar.md, packages/react-core/src/demos/CustomMenus.md		 Icon import swaps from CogIcon to RhUiSettingsFillIcon and minor markdown/code-fence whitespace edits.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

Suggested reviewers

  • nicolethoen
  • mcoker
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title clearly and concisely describes the main change: replacing CogIcon with RhUiSettingsFillIcon across the codebase, which aligns with all file modifications.
Linked Issues check ✅ Passed The PR successfully replaces CogIcon with RhUiSettingsFillIcon throughout the codebase, fulfilling the primary objective from issue #12344 to update the settings icon per design guidance.
Out of Scope Changes check ✅ Passed All changes are directly related to replacing CogIcon with RhUiSettingsFillIcon across components, demos, tests, and examples; no unrelated modifications were introduced.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented Apr 10, 2026 •
edited
Loading

Preview: https://pf-react-pr-12345.surge.sh

A11y report: https://pf-react-pr-12345-a11y.surge.sh

mcoker
mcoker requested changes Apr 10, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@mcoker mcoker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM other than Button isSettings should be updated, too. Per @lboehling there is no use case for the old FA/cog icon, we should always be using ui-settings-fill instead.

https://github.com/thatblindgeye/patternfly-react/blob/2166f8ec5dc91965a26e28871c9b201d00ff2412/packages/react-core/src/components/Button/Button.tsx#L218

I didn't run backstop against this PR but can if you want, just lemme know.

mcoker
mcoker approved these changes Apr 10, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@mcoker mcoker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚙️ ✅

@kmcfaul kmcfaul merged commit 190da46 into patternfly:main Apr 10, 2026
14 checks passed
@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented Apr 10, 2026

Your changes have been released in:

  • @patternfly/react-code-editor@6.5.0-prerelease.54
  • @patternfly/react-core@6.5.0-prerelease.51
  • @patternfly/react-docs@7.5.0-prerelease.60
  • @patternfly/react-drag-drop@6.5.0-prerelease.52
  • demo-app-ts@6.5.0-prerelease.80
  • @patternfly/react-table@6.5.0-prerelease.52
  • @patternfly/react-templates@6.5.0-prerelease.51

Thanks for your contribution! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mcoker mcoker mcoker approved these changes

@kmcfaul kmcfaul kmcfaul approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Replace CogIcon wwith RH UI settings icon

4 participants

@thatblindgeye @patternfly-build @mcoker @kmcfaul